<template>
    <div id="app">
        <div class="div1">
            <h3>品质套餐</h3>
            <div class="div1-div">搭配齐全吃得好</div>
            <div class="div1-div2">立即抢购></div>
            <img src="//fuss10.elemecdn.com/d/d4/16ff085900d62b8d60fa7e9c6b65dpng.png?imageMogr/format/webp/thumbnail/!240x160r/gravity/Center/crop/240x160/" alt="">
        </div>
        <div class="div1">
            <h3>限量抢购</h3>
            <div class="div1-div">超值美味 9.9元起</div>
            <div class="div1-div2"><span>318人</span>正在抢</div>
            <img src="//fuss10.elemecdn.com/b/e1/0fa0ed514c093a7138b0b9a50d61fpng.png?imageMogr/format/webp/thumbnail/!240x160r/gravity/Center/crop/240x160/" alt="">
        </div>
        <div class="div3">
          <span><span>——</span>推荐商家<span>——</span></span>
        </div>
    </div>
</template>
<script>
    
</script>
<style lang="stylus" scoped>
#app
 margin-bottom: 2.133333vw;
 font-size: 0;
 padding: 0 2.666667vw;
 .div1
  margin-right: .8vw
  position: relative;
  -webkit-box-flex: 1; 
  flex: 1;
  background: linear-gradient(0deg,#f4f4f4 5%,#fafafa 95%)
  padding: 3.2vw 0 0 4vw;
  z-index: 0
  display inline-block
  h3
    font-size: .453333rem;
    font-weight: 700;
    margin-bottom: 1.333333vw;
    color: #333;
  .div1-div
    font-size: .346667rem;
    color: #777;
    margin-bottom: 2.4vw
  .div1-div2
    font-size: .32rem;
    color: #af8260;
    font-weight: 700;
  img
    // position: absolute;
    // right: 0;
    bottom: -2vw;
    width: 42.5vw;
    height: 20vw;
.div3
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 9.6vw;
    font-size: .4rem;
    color: #000;
</style>
